<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>留言板🔥</title>
  <style>
    @import url(https://fonts.googleapis.com/css?family=Roboto:400,600);

    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    body {
      font-family: "Roboto", sans-serif;
      height: 100%;
      margin-bottom: 50px;
      background: cadetblue;
    }

    .container {
      width: 85%;
      background: #fff;
      margin: 50px auto;
      border-radius: 5px;
      padding: 15px;
    }

    #close {
      background: #28256b;
      width: 100%;
      color: #fff;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 5px;
      border: none;
      transition: all 0.2s;
    }

    #close:hover {
      background: #1d1a4d;
    }

    .title {
      font-size: 27px;
      text-indent: 10px;
    }

    .comment-form {
      display: flex;
      flex-direction: column;
    }

    .comment-form input,
    .comment-form textarea {
      border-radius: 5px;
      background: #efefef;
      border: none;
      outline: none;
      padding: 10px;
      margin-bottom: 20px;
    }

    .comment-form :disabled {
      background: rgba(0, 0, 0, 0.351);
      cursor: not-allowed;
    }


    #submit {
      background: #298d9f;
      width: 67px;
      color: #fff;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 5px;
      border: none;
      transition: all 0.2s;
    }

    #submit:hover {
      background: #1e6875;
    }

    #comment-list li {
      padding: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    #comment-list li .top {
      display: flex;
      justify-content: space-between;
    }

    #comment-list li .top :first-child {
      font-weight: 600;
    }

    #comment-list li .top :last-child {
      font-size: 12px;
    }

    .content {
      margin: 10px 0;
      background: #eee;
      padding: 2rem 1rem;
    }
  </style>
</head>

<body>
  <div class="container">
    <button id="close">关闭留言</button>
    <!-- 表单区域 -->
    <div>
      <h2 class="title">留言板</h2>
      <div class="comment-form">
        <input id="name" type="text" placeholder="请输入您的姓名...">
        <textarea id="comment" name="" placeholder="请输入您的留言..." cols="30" rows="3"></textarea>
        <button id="submit">留言</button>
      </div>
    </div>

    <!-- 列表区域 -->
    <div>
      <h2 class="title">留言列表</h2>
      <ul id="comment-list">
      </ul>
    </div>
  </div>

  <script>

    /*
      1、初始数据的渲染 
      数据通过ajax请求从后端获取 - 后端查数据库
      前端根据数据把画面画出来
    */
    //  模拟后端返回的数据
    const data = [
      {
        name: 'lisi',
        date: '2023/2/3',
        content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit'
      },
      {
        name: 'wangwu',
        date: '2023/1/3',
        content: 'ur adipisicing elit. Odio sed eos esse quod. Quod animi id adipisci. Pariatur natus laborum quasi veniam? Maiores eos assumenda doloremque consectetur ducimus maxime excepturi?Lorem ipsum dolor sit amet consectetur adipisicing elit'
      },
    ]
    const oUl = document.querySelector('#comment-list')
    renderList()


    // 添加留言
    const addBtn = document.querySelector('#submit')
    const username = document.querySelector('#name')
    const conent = document.querySelector('#comment')
    addBtn.onclick = () => {
      oUl.innerHTML = ''
      data.unshift({
        name: username.value,
        date: new Date().toLocaleString(),
        content: conent.value
      })
      renderList()
    }

    // 切换留言状态
    const closeBtn = document.querySelector('#close')
    let isClosed = false // true:处于关闭状态  false：开启状态
    closeBtn.onclick = function () {
      isClosed = !isClosed
      if (isClosed) {//处于关闭状态
        closeBtn.innerHTML = '开启留言'
        // addBtn.disabled = true
        // username.disabled = true
        // conent.disabled = true

      } else {//开启状态
        closeBtn.innerHTML = '关闭留言'
        // addBtn.disabled = false
        // username.disabled = false
        // conent.disabled = false
      }
      addBtn.disabled = !addBtn.disabled
      username.disabled = !username.disabled
      conent.disabled = !conent.disabled
    }

    function renderList() {
      data.forEach((item) => {
        oUl.insertAdjacentHTML('beforeend', `
        <li>
          <div class="top"><span>${item.name}</span><span>${item.date}</span></div>
          <div class="content">${item.content}</div>
        </li>
      `)
      })
    }


  </script>
</body>

</html>